<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- 头部区域 -->
    <div class="header">
      <h4>北京</h4>
      <label for="">
        <img src="./icons/header_search.png" alt="" />
        <input type="text" placeholder="输入小区名称或商圈" />
      </label>
      <span><img src="./icons/header_news.png" alt="" /></span>
    </div>
    <!-- 头部区域 -->

    <!-- 轮播图 -->
    <div class="banner">
      <img src="./imgs/banner.png" alt="" />
    </div>
    <div class="banner_dian">
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 轮播图 -->

    <!-- nav区域 -->
    <div class="nav">
      <div class="left">
        <img src="./icons/nav_2.png" alt="" />
      </div>
      <div class="right">
        <img src="./icons/nav_1.png" alt="" />
      </div>
    </div>
    <!-- nav区域 -->

    <!-- 超值优惠区域 -->
    <div class="title">
      <h3>超值优惠</h3>
      <a><img src="./icons/content_icon_next.png" alt="" /></a>
    </div>
    <div class="content">
      <div class="left">
        <img src="./imgs/content_tu_home_left@2x.png" alt="" />
        <h4>宝石花元</h4>
        <span>朝阳区-2室1厅-90m</span>
        <p>￥7800元/月</p>
      </div>
      <div class="left">
        <img src="./imgs/content_tu_home_left@2x.png" alt="" />
        <h4>领袖新规度3号院</h4>
        <span>朝阳区-2室1厅-90m</span>
        <p>￥12356元/月</p>
      </div>
    </div>
    <!-- 超值优惠区域 -->

    <!-- 广告招募区域 -->
    <div class="van">
      <img src="./imgs/ggwei_home.png" alt="" />
    </div>
    <!-- 广告招募区域 -->

    <!-- 为您推荐区域 -->
    <div class="main">
      <div class="left">
        <h4>为您推荐</h4>
      </div>
      <div class="right">
        <span class="zheng">整租</span><span class="he">合租</span>
      </div>
    </div>
    <div class="hot">
      <div class="left">
        <img src="./imgs/home_list_tu1@2x.png" alt="" />
      </div>
      <div class="right">
        <h4>整租-保利家园7号楼1号楼</h4>
        <p>朝阳区-2室1厅-90m</p>
        <span>距5号线立水桥站1200米，13号线广西南合...</span>
        <div class="zu"><a href="#">独卫</a><a href="#">含阳台</a></div>
        <p class="pay">￥7800 元/月</p>
      </div>
    </div>
    <div class="hot">
      <div class="left">
        <img src="./imgs/home_list_tu2@2x.png" alt="" />
      </div>
      <div class="right">
        <h4>整租-保利家园7号楼1号楼</h4>
        <p>朝阳区-2室1厅-90m</p>
        <span>距5号线立水桥站1200米，13号线广西南合...</span>
        <div class="zu"><a href="#">独卫</a><a href="#">含阳台</a></div>
        <p class="pay">￥7800 元/月</p>
      </div>
    </div>
    <div class="hot">
      <div class="left">
        <img src="./imgs/home_list_tu3@2x.png" alt="" />
      </div>
      <div class="right">
        <h4>整租-保利家园7号楼1号楼</h4>
        <p>朝阳区-2室1厅-90m</p>
        <span>距5号线立水桥站1200米，13号线广西南合...</span>
        <div class="zu"><a href="#">独卫</a><a href="#">含阳台</a></div>
        <p class="pay">￥7800 元/月</p>
      </div>
    </div>
    <div class="hot">
      <div class="left">
        <img src="./imgs/home_list_tu4@2x.png" alt="" />
      </div>
      <div class="right">
        <h4>整租-保利家园7号楼1号楼</h4>
        <p>朝阳区-2室1厅-90m</p>
        <span>距5号线立水桥站1200米，13号线广西南合...</span>
        <div class="zu"><a href="#">独卫</a><a href="#">含阳台</a></div>
        <p class="pay">￥7800 元/月</p>
      </div>
    </div>
    <div class="hot">
      <div class="left">
        <img src="./imgs/home_list_tu5@2x.png" alt="" />
      </div>
      <div class="right">
        <h4>整租-保利家园7号楼1号楼</h4>
        <p>朝阳区-2室1厅-90m</p>
        <span>距5号线立水桥站1200米，13号线广西南合...</span>
        <div class="zu"><a href="#">独卫</a><a href="#">含阳台</a></div>
        <p class="pay">￥7800 元/月</p>
      </div>
    </div>
    <!-- 为您推荐区域 -->

    <!-- 查看更多优质房源 -->
    <div class="home">
      <a href="#">查看更多优质房源</a>
    </div>
    <!-- 查看更多优质房源 -->

    <!-- 品牌故事入口 -->
    <div class="story">
      <a href="#"><img src="./imgs/gushirukou_home.png" alt="" /></a>
    </div>
    <!-- 品牌故事入口 -->

    <!-- 底部区域 -->
    <div class="footer">
      <ul>
        <li>
          <a href="#" class="active">
            <span class="iconfont icon-home"></span>
            <p>首页</p>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="iconfont iconfont icon-search"></span>
            <p>快速找房</p>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-agent"></span>
            <p>委托代理</p>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="iconfont icon-my"></span>
            <p>我的</p>
          </a>
        </li>
        
      </ul>
    </div>
    <!-- 底部区域 -->
    <script src="./flexible.js"></script>
  </body>
</html>